<template>
  <div class="container">
    <div class="filter-container">
      <div class="flex-row" style="width: 90%;">
        <div class="flex-1" style="line-height: 40px;">报警类型</div>
        <el-button type="primary" size="middle" @click="addData()" v-if="controlBtn.add">添加类型</el-button>
      </div>
    </div>
    <el-table v-loading="loading" :data="dataList" border style="width: 90%">
      <el-table-column prop="title" label="类型标题" align="center">
      </el-table-column>
      <el-table-column prop="code" align="center" label="类型编码">
      </el-table-column>
      <el-table-column prop="num" align="center" label="报警阈值" width="100">
      </el-table-column>
      <el-table-column align="center" width="160" label="操作">
        <template slot-scope="{row}">
          <el-button type="primary" size="small" @click="editData(row)" v-if="controlBtn.edit">编辑</el-button>
          <!-- <el-button type="danger" size="small" @click="deleteData(row)"  v-if="controlBtn.del">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加、编辑 -->
    <el-dialog @close="dialogClose" :title="dialogVisible.dialog_title" :visible.sync='dialogVisible.show'
      :close-on-click-modal=false>
      <el-form :rules="rules" :model="dialogVisible" ref="dialogVisible" label-position="top" class="dialogVisible">
        <el-form-item label="类型标题" prop="title"><el-input v-model="dialogVisible.title"
            placeholder=""></el-input></el-form-item>
        <div class="flex-row">
          <div class="flex-1" style="margin-right:10px">
            <el-form-item label="类型编号" prop="code"><el-input v-model="dialogVisible.code"
                placeholder=""></el-input></el-form-item>
          </div>
          <el-form-item label="报警阈值" prop="num"><el-input v-model="dialogVisible.num"></el-input></el-form-item>
        </div>
        <el-form-item label="上传音频">
          <el-upload ref="replaceUploader" :file-list="fileList" v-model="dialogVisible.audio_url" :headers="headers"
            :on-remove="handleRemove" accept=".mp3" class="avatar-uploader" :action="fileUpload" :limit="1"
            :show-file-list="true" :on-success="handleReplaceAvatarSuccess" :on-exceed="handleExceed">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="default" @click="dialogVisible.show = false">取消</el-button>
          <el-button type="primary" @click="dialogSubmit()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { warning_type_save, warning_type_list, warning_type_delete } from '@/api/warn'
import store from '@/store'
import { getToken } from '@/utils/auth' // get token from cookie

export default {
  data() {
    return {
      loading: false,
      total: 0,
      dataList: [],
      fileUpload: `${process.env.VUE_APP_BASE_API}/file/upload`,
      dialogVisible: {
        show: false,
        dialog_title: '',
        title: '',
        code: '',
        audio_url: '',
        audio_name: '',
        num: 0
      },
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
        num: [{ required: true, message: '报警阈值不能为空', trigger: 'blur' }],
      },
      controlBtn: {
        add: false,
        del: false,
        edit: false,
        auth: false
      },
      fileList: []
    }
  },
  computed: {
    headers() {
      return {
        'Authorization': getToken()
      }
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = []
    },
    handleReplaceAvatarSuccess(res, file) {
      // this.dialogVisible.audio_url = file.url;
      this.fileList = [{ name: file.name, url: res.body.url }]
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      this.$message.warning(`请先删除旧文件，才能重新上传新文件`);
    },
    dialogClose() {
      // this.$refs.dialogVisible.resetFields()
    },
    editData(row) {
      console.log(row)
      this.dialogVisible.dialog_title = '编辑用户'
      this.dialogVisible.title = row.title
      this.dialogVisible.code = row.code
      this.dialogVisible.id = row.id
      this.dialogVisible.rec_flag = row.rec_flag
      this.dialogVisible.audio_url = row.audio_url
      this.dialogVisible.audio_name = row.audio_name
      this.dialogVisible.num = row.num
      this.fileList = [{ name: row.audio_name, url: row.audio_url }]
      this.dialogVisible.show = true
    },
    deleteData(row) {
      let that = this
      this.$confirm('确实删除当前类型吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        warning_type_delete({ id: row.id }).then(() => {
          that.getDataList()
        })
      })
    },
    dialogSubmit() {
      let that = this
      if (this.fileList && this, this.fileList.length > 0) {
        console.log(this.fileList)
        this.dialogVisible.audio_url = this.fileList[0].url
        this.dialogVisible.audio_name = this.fileList[0].name
        this.$refs['dialogVisible'].validate((valid) => {
          if (valid) {
            warning_type_save(this.dialogVisible).then(() => {
              that.getDataList()
              that.dialogVisible.show = false
            })
          }
        })
      } else {
        this.$message.warning('请添加音频')
      }
    },
    addData() {
      this.dialogVisible.dialog_title = '添加类型'
      this.dialogVisible.title = ''
      this.dialogVisible.code = ''
      this.dialogVisible.audio_url = ''
      this.dialogVisible.audio_name = ''
      this.fileList = []
      this.dialogVisible.id = 0
      this.dialogVisible.show = true
    },
    getDataList() {
      this.loading = true
      warning_type_list().then(res => {
        this.dataList = res
        this.loading = false
      })
    }
  },
  mounted() {
    this.getDataList()
    const mainRoutes = store.getters.mainRoutes
    if (mainRoutes.warntype && mainRoutes.warntype.length > 0) {
      mainRoutes.warntype.forEach(e => {
        if (e == '增加') {
          this.controlBtn.add = true
        }
        if (e == '删除') {
          this.controlBtn.del = true
        }
        if (e == '修改') {
          this.controlBtn.edit = true
        }
        if (e == '权限') {
          this.controlBtn.auth = true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dialogVisible {
  ::v-deep.el-form-item__label {
    padding: 0 !important;
  }
}

.filter-container {
  padding-bottom: 10px;
}
</style>
